<template>
    <div class="all">
      <div class="left">
        <div class="top_left"> 
          <dv-border-box-12>
            <center />
          </dv-border-box-12>
        </div>
        <div class="down_left">
          <dv-border-box-13>
            <bottomLeft />
          </dv-border-box-13>
        </div>
      </div>
      <div class="right">
        <div class="top_right">
          <dv-border-box-13>
            <centerRight1 />
          </dv-border-box-13> 
        </div>
        <div class="down_right">
          <dv-border-box-12>
            <centerRight2 />
          </dv-border-box-12>
        </div>
      </div>
    </div>
</template>

<script>
import centerLeft1 from './centerLeft1'
import centerLeft2 from './centerLeft2'
import centerRight1 from './centerRight1'
import centerRight2 from './centerRight2'
import center from './center'
import bottomLeft from './bottomLeft'
import bottomRight from './bottomRight'

export default {
  data(){
    return{
      
    }
  },
  components:{
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    center,
    bottomLeft,
    bottomRight
  }
}
</script>

<style>
    @import '../../assets/scss/index.scss';
    .all{
      width: 100%;
      height: 100%;
      background-image: url("../../assets/pageBg.png");
      display: flex;
      justify-content: space-around;
    }
    .left{
      width: 49%;
      height: 100%;
      /* background: cornflowerblue; */
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .top_left{
      width: 100%;
      height: 49%;
      /* background: green; */
    }
    .down_left{
      width: 100%;
      height: 49%;
      /* background: green; */
      margin-top: 2%;
    }
    .right{
      width: 49%;
      height: 100%;
      /* background: cornflowerblue; */
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .top_right{
      width: 100%;
      height: 49%;
      /* background: green; */
    }
    .down_right{
      width: 100%;
      height: 49%;
      /* background: green; */
      margin-top: 2%;
    }
</style>